<template>
  <div class="mui-content">
    <div class="wrapper">
      <div class="title mui-text-center">绑定手机号</div>
      <div  class="mui-text-center form">
        <div class="input"><input type="text" placeholder="绑定手机号" v-model="phone" maxlength="11"></div>
        <div class="input wrapper-user"><input type="text" placeholder="验证码" v-model="phoneCode">
          <button type="button" :disabled="disabled" class='phoneRegist' @click="checkPhone" >{{btntxt}}</button>
        </div>
        <button @click="bindPhone">
          确认绑定
        </button>
      </div>
    </div>
    <transition name="fade">
      <Prompt
        title="错误"
        :msg=mistakeMsg
        confirm="确定"
        v-on:confirm1="confirm1($event)"
        v-if="mistake"
      >
      </Prompt>
    </transition>

  </div>
</template>

<script>
  import  Prompt from '@components/common/Prompt.vue'
  export default {
    components:{
      Prompt
    },
    data(){
      return {
        UserId:'',
        mistake:false,
        mistakeMsg:'',
        phone:'',
        pwd:'',
        unit:'',
        phoneCode:'',
        // phone:'',
        datt:'',
        btntxt:'获取验证码',
      disabled:false,
        OrganCode:'',
        DeviceCode:'',
        OpenId:'',
      }
    },
    created(){
    // var ZcSoft_WxOpenId_VueBind_Info2 = {};
    //   ZcSoft_WxOpenId_VueBind_Info2.OrganCode = "01";
    //   ZcSoft_WxOpenId_VueBind_Info2.DeviceCode = "008";
    //   ZcSoft_WxOpenId_VueBind_Info2.OpenId = "oDBXTs3Zgh-zXcDRK-IWmfrluLGg84247887";
    //   ZcSoft_WxOpenId_VueBind_Info2.Telephone = '13666666666';
    //   localStorage.setItem('ZcSoft_WxOpenId_VueBind_Info',JSON.stringify(ZcSoft_WxOpenId_VueBind_Info2))
    //   localStorage.setItem('userId',ZcSoft_WxOpenId_VueBind_Info2.OpenId)

    },
    mounted(){

    },
    methods:{
      confirm1(){
        this.mistake=false
      },
      bindPhone(){
        let me=this;
        if(me.phoneCode!=''){
          me.$Global.zcServer.Post({
            IsNeedLogin:'false',
            Paras:{
              Name:'Vue_CourseResource',
              Action:'UserBind',
              UserId:me.$Global.UserId,
              Data:{
                OrganCode:me.$Global.OrganCode,
                DeviceCode:me.$Global.DeviceCode,
                OpenId:me.$Global.UserId,
                Telephone:me.phone,
                CheckCode:me.phoneCode
              }
            },
            Callback:me.Callback_GetOpenId,
            Scope:me
          });
        }else {
          me.mistake=true;
          me.mistakeMsg="请输入验证码"
        }
      },
      /*===========绑定回调=============*/
      Callback_GetOpenId(resJson,scope){
        console.log('绑定返回');
        console.log(resJson);
        if(resJson.success){
          localStorage.setItem('myPhone',this.phone);
          this.$router.push('/Resource')
        }else{
         this.mistake=true;
         this.mistakeMsg=resJson.msg
        }
      },
      checkPhone(){
        // let phone =this.phone;
        let me=this;
        let reg=11 && /^[1]([0-9])[0-9]{9}$/;
        if(me.phone===''){
          me.mistake=true;
          me.mistakeMsg="请输入手机号！"
        }else if(!reg.test(me.phone)){
          me.mistake=true;
          me.mistakeMsg="手机号格式错误！";
        } else{
          me.time=60;
          me.disabled=true;
          me.timer();
          me.$Global.zcServer.Post({
            IsNeedLogin: 'false',
            Paras: {
              UserId:me.$Global.UserId,
              action: "SMSCode",
              name: "Vue_CourseResource",
              Data: {
                OrganCode:me.$Global.DeviceCode,
                Telephone: me.phone
              }
            },
            callback: me.cb_registCode,
            Scope:me,
          });
        }
      },
      timer() {
        if (this.time > 0) {
          this.time--;
          this.btntxt=this.time+"s后重新获取";
          setTimeout(this.timer, 1000);
        } else{
          this.time=0;
          this.btntxt="获取验证码";
          this.disabled=false;
        }
      },
      /*=====验证码======*/
      cb_registCode(resJson,scope){
        console.log("验证码返回")
        console.log(resJson)
      }
    }
  }
</script>

<style scoped>

  .mui-content{
    position: absolute;
    left: 0 ;
    right: 0;
    top: 0 ;
    bottom: 0 ;
    background: url(../assets/img/zc_home2.png) no-repeat;
    background-size: 100% 100% ;
  }
  .mui-content .title{
    height: 30vh;
    line-height: 30vh;
    color: white;
    font-size: 1.1rem;
  }
  .mui-content .form input{
    width: 92%;
    border:1px solid rgba(93, 194, 240, 1);
    height: 40px;
    border-radius: 5px;
    margin-top: 0px;
  }
  .mui-content .form{
    margin-top: 60px;
  }
  .mui-content .form #top{
    margin-top: 8vh;
    border-radius: 5px;
  }
  .mui-content .form button{
    width: 92%;
    border:1px solid rgba(93, 194, 240, 1);
    /*outline: none;*/
    margin-top: 20px;
    height: 40px;
    line-height: 30px;
    background-color:rgba(93, 194, 240, 1) ;
    color: white;
    word-spacing: 10px;
  }
  .mui-content .input{
    display: inline;
  }
  .mui-content  .wrapper-user input{
    height: 39px;
  }
  .mui-text-right a{
    margin-right: 40px;
    position: relative;
  }
  .mui-text-right a:before{
    content: '';
    position: absolute;
  }
  .mui-content  .wrapper-user input{
    height: 39px;
  }
  .mui-content  .wrapper-user button{
    /*width: 32%;*/
    position: absolute;
    width: 30%;
    right: 5%;
    margin-top: 4px;
    background-color: rgba(93, 194, 240, 1);
    border-radius: 70px;
    color: white;
    height: 32px;
    line-height: 20px;
  }
  /*彈出框*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity .2s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;
  }

</style>
